<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 	
		<uni-nav-bar fixed="true" left-icon="false" :status-bar="true" :border="false"  class="NavBar"   >
			<!-- <view class="Navsearch flex" @click="Torelease()"><image style="width: 100%;" src="../static/images/jia.png" mode="widthFix"></image></view> -->
			<view class="Navsearch"></view>
			<view class="flex ListBox">
				<view class="NavList"  v-for="(item,index) in NavList" :key="index" @click="TabNav(index)">
					<text :class="num==index?'choice':''">{{item}}</text>
				</view>
			</view> 
			<view class="Navsearch"></view>
		</uni-nav-bar>
		
		<view class="TvBox flex wrap" v-if="videoList.length>0">
			<view class="TvList" v-for="(item,index) in videoList" :key="index" @click="Todetails(item.id,index)">
				<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.cover_url" mode=""></image></view>
				<view class="Info">
					<view class="Title">{{item.title}}</view>
					<view class="flex">
						<view  class="texthide">{{item.member_name}}</view>
						<view class=""><image style="width: 30rpx" src="../static/images/audienceIco.png" mode="widthFix"></image> {{item.visits}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="videoList.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		<tab-bar :num="1"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../TabBar/TabBar'
	export default {
		 components:{TabBar},
		data() {
			return {
				NavList:["推荐","最新"],
				num:0,
				videoList:"",
				curpage:1
			}
		},
		onLoad() {
			this.getvideoList()
		},
		onReachBottom(e) {
			if(this.curpage){
				this.getvideoList(true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		onPullDownRefresh() {
			this.curpage=1
			this.getvideoList();
			setTimeout(function () {
				uni.stopPullDownRefresh(); 
			}, 1000);
		},
		methods: {
			Todetails(voideid,index){//视频详情
				// nvue中
				// #ifdef APP-NVUE
					plus.storage.setItem('voideid', voideid)
					// plus.storage.setItem('voideindex', index)
				// #endif
				// h5中
				// #ifndef APP-NVUE
					uni.setStorageSync('voideid', voideid);
					// uni.setStorageSync('voideindex', index);
				// #endif
				uni.navigateTo({
					url:"../video/details?voideid="+voideid+"&index="+index
				})
			},
			Torelease(){//发布视频
				uni.navigateTo({
					url:"../video/release"
				})
			},
			getvideoList(state){
				this.$util.request({
					url: '/live/index.php?act=api-video&op=getVideoList',
					method: 'get',
					data: {
						curpage:this.curpage,
						orderStr:this.num?"new":"visits"
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(state){
							this.videoList= this.videoList.concat(res.datas.list) 
						}else{
							this.videoList=res.datas.list
						}
						if(res.datas.paged.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			TabNav(index){
				this.curpage=1
				this.num=index
				this.getvideoList()
			}
		}
	}
</script>

<style>
	.texthide{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 180rpx;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF; 
	    top: 0;  
	    z-index: 999;  
	}
	.Info .Title{
		font-weight: bold;
	}
	.Info{
		position: absolute;
		bottom: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.BgImg{
		width: 345rpx;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	.TvList{
		width: 345rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border:1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		position: relative;
	}
	.TvBox{
		margin: 20rpx;
	}
	.ListBox{
		width:300rpx;
	}
	.NavList{
		font-size: 36rpx;
		color: #000000;
		width: 50%;
		text-align: center;
	}
	.NavBox{
		/* margin-top: 20rpx; */
		font-weight: bold;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 10rpx 0;
	}
	.Navsearch{
		width: 50rpx;
		height: 50rpx;
		overflow: hidden;
		margin-left: 30rpx;
	}
	.choice{
		border-bottom: 4rpx solid #E82C58;
	}
	page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>
